<template>
  <div class="passForm" v-loading="loading">
    <el-form ref="form" :model="form" label-width="100px" :inline="true" size="small" :disabled="true">
      <el-form-item label="标题">
        <el-input v-model="form.title" class="long"></el-input>
      </el-form-item>
      <el-form-item label="栏目">
        <el-input v-model="form.colName" class="short"></el-input>
      </el-form-item>
      <el-form-item label="类别">
        <el-input v-model="form.categoryName" class="short"></el-input>
      </el-form-item>
      <el-form-item label="一级审核员">
        <el-input v-model="form.auditFirst" class="short"></el-input>
      </el-form-item>
      <el-form-item label="二级审核员">
        <el-input v-model="form.auditSecond" class="short"></el-input>
      </el-form-item>
      <el-form-item label="有效期">
        <el-input v-model="form.endTime" class="long"></el-input>
      </el-form-item>
      <el-form-item label="门户选择">
        <el-checkbox-group v-model="form.portalSelect" class="short">
          <el-checkbox label="1">对内</el-checkbox>
          <el-checkbox label="2">对外</el-checkbox>
        </el-checkbox-group>
<!--        <span class="short">{{form.portalSelect}}</span>-->
      </el-form-item>
      <el-form-item label="是否置顶">
        <el-radio-group v-model="form.top" class="short">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
<!--        <span class="short">{{form.top?'是':'否'}}</span>-->
      </el-form-item>
      <el-form-item label="缩略图">
        <el-image
            :lazy="true"
            style="width: 100px; height: 100px"
            :src="form.pic"
            v-if="form.pic"
            :preview-src-list="[form.pic]">
        </el-image>
      </el-form-item>
      <el-form-item label="内容">
                <div id="wangEditor"   class="editor"></div>
      </el-form-item>
    </el-form>
    <div class="label">
      <span class="title">流程记录</span>
      <div style="width: 650px">
        <el-table
            :data="tableData"
            size="small"
            border
        >
          <el-table-column
              prop="node"
              label="流程节点">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="处理人">
          </el-table-column>
          <el-table-column
              prop="view"
              label="处理意见">
          </el-table-column>
          <el-table-column
              prop="view"
              label="处理结果">
          </el-table-column>
          <el-table-column
              prop="time"
              label="处理时间">
          </el-table-column>
        </el-table>
      </div>

    </div>

  </div>
</template>

<script>
import E from "wangeditor"

export default {
  name: "processForm",
  data(){
    return {
      tableData:[],
      form:{
        "auditFirst": "",
        "auditFirstId": "",
        "auditSecond": "",
        "auditSecondId": "",
        "category": "",
        "categoryName": "",
        "col": "",
        "colName": "",
        "content": "",
        "createdTime": "",
        "endTime": "",
        "id": "",
        "portalSelect": "",
        "startTime": "",
        "state":"",
        "tag": "",
        "title": "",
        "top": "",
        "viewsFirst": "",
        "viewsSecond": "",
      },
      editor:null,
      loading:false
    }
  },
  methods:{
    setData(data){
      this.loading = true
      setTimeout(()=>{
        this.loading = false
        Object.keys(data).forEach(x=>{
          this.form[x] = data[x]
        })
        if(data.content!==null){
          this.editor.txt.html(data.content)
        }
        this.form.portalSelect = this.form.portalSelect.split(',')
        console.log(this.form.portalSelect)
        this.getFollow(data.id)
      },500)

    },
    getFollow(id){
      this.$api.getContentLogs({contentId :id}).then(res=>{
        this.tableData = res.data
      })
    },
  },
  mounted() {
    this.editor = new E("#wangEditor")
    this.editor.create()
    this.editor.disable()
  }
}
</script>

<style scoped lang="less">
.short{
  width: 270px;
  display: inline-block;
}
.long{
  width: 650px;
}
.editor{
  width: 650px;
}
.passForm{
  padding: 0 20px;
}
.label{
  display: flex;
  .title{
    display: inline-block;
    padding: 0 22px;
    color: #1890FF;
    border-left: 3px solid #1890FF;
    height: 18px;
    line-height: 18px;
  }
  margin-bottom: 30px;
}
</style>